<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test_block {
            color: white;
            font-size: 40px;
            text-align: center;
            font-weight: bold;
            height: 100px;
            margin-top: 40px;
            background-color: brown;
            line-height: 100px;
        }

    </style>
</head>
<body>
<img id="myImg" style="display: none; width: 200px;height: 100px;">
<video controls autoplay id="myVideo" style="display: none;width: 400px;height: 200px;"></video>
<div class="test_block" id="message">
    弹出消息
</div>

<div class="test_block" id="photo">
    拍照
</div>
<input type="text">
<div class="test_block" id="keyboard">
    弹出键盘
</div>

<div class="test_block" id="wifi">
    获取wifi列表
</div>

<div class="test_block" id="location">
    获取定位
</div>

<script>
    window.jsBridge = window.jsBridge || {}
    // 核心方法
    window.jsBridge.call = function (mehtodName, params ,callBack) {
      // 全局唯一的方法名
     const winName = `win_func_${~~(Math.random() * 100000)}`
     // 定义一个全局的函数
      window[winName] = function (...args) {
        if(callBack) {
          callBack(...args)
        }
        delete window[winName] // 他来了又走了
      }
      if(window.harmonyOS && window.harmonyOS[mehtodName]) {
         harmonyOS[mehtodName](params, winName) // 调用sdk的方法
      }
    }

</script>

<script>
    //    jsBridge.call("takePhoto", (url) => { })
    document.querySelector("#message").onclick = () => {
        // harmonyOS.showMessage("选择鸿蒙真tm酸爽！！！")
        jsBridge.call("showMessage", "" ,() => {

        })
    }
    document.querySelector("#photo").onclick = () => {
        // harmonyOS.takePhoto("test")
        jsBridge.call("takePhoto", null ,(url) => {
            if(url.indexOf("jpg") > -1) {
            document.querySelector("#myImg").src = url
            document.querySelector("#myImg").style.display = "block"
        }
        if(url.indexOf("mp4") > -1) {
            document.querySelector("#myVideo").src = url
            document.querySelector("#myVideo").style.display = "block"
        }

        })
    }
    document.querySelector("#keyboard").onclick = () => {
        jsBridge.call("switchKeyBoard", "")
    }
    document.querySelector("#wifi").onclick = () => {
        jsBridge.call("getWifiList", "" , (json) => {
            alert(json)
        })

    }
    document.querySelector("#location").onclick = () => {}

    function test (url) {
        if(url.indexOf("jpg") > -1) {
            document.querySelector("#myImg").src = url
            document.querySelector("#myImg").style.display = "block"
        }
        if(url.indexOf("mp4") > -1) {
            document.querySelector("#myVideo").src = url
            document.querySelector("#myVideo").style.display = "block"
        }
    }
</script>
</body>
</html>